<template>
  <h1>1.基本用法</h1>
  <h2>pearson--name:{{pearson.name}}  age---{{pearson.age}}  sex---{{pearson.sex}}  scroe---{{pearson.score}}  hobby---{{pearson.hobby}}</h2>
  <button @click="changePearson">改变pearson</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
 import {reactive} from 'vue'
 interface PearsonType{
  name?:string,
  age?:number,
  sex?:string,
  score?:number,
  hobby?:string[]
 }
 const pearson = reactive<PearsonType>({
  name:'小于',
  age:18,
  sex:'男',
  hobby:['唱','跳']
 })
 const changePearson = () => {
    // pearson.age = 19
    // delete pearson.name 
    // pearson.score = 89
    (pearson.hobby as string[])[0] = 'rap'
 }
</script>